



// webpack打包的配置文件
// 入口
// 出口
//devserver配置文件

// loader
// 打包JS(react)
// 打包 CSS/less/scss
// 打包images
// 打包html
// 打包json

//plugins

//mode
const path=require("path")
const htmlWebpackPlugin = require('html-webpack-plugin')
const openBroserWebpackPlugin=require('webpack-open-browser-plugin')
// const  extractTextWebpackPlugin =require("extract-text-webpack-plugin")
const miniCssExtractPlugin=require('mini-css-extract-plugin')
module.exports={
    mode:'development',//开发模式
    entry:['./src/main.js'],//入口文件
    output:{
        path:path.resolve(__dirname,"dist"),//打包得到dist文件
        filename:'js/app.[hash:8].js',//hash：8 哈希算法得到长度为8的随机字符串，避免命名冲突
        publicPath:"",//文件相对路径
    },
    devtool:'source-map',//查看所有文件 方便在线调试
    // 文件别名 以后@代指src
    resolve:{
        alias: {
            "@":path.resolve("src"),
            "~":path.resolve("./src/utils")
        }
    },




    module:{
        rules:[
            {
                test:/\.(js|jsx)$/,
                exclude:/node_modules/,
                use:['babel-loader']
            },
            {
                test:/\.(png|jpg|svg|gif|eot|ttf|woff|woff2|webp)$/,
                exclude:/node_modules/,
                use:[{
                    loader:'url-loader',
                    options:{
                        limit:8192,//打包的图片最大8M
                        name:'imgs/[hash:8].[ext]',//假如你的文件时photo.png=>photo.123dasda.png
                    }
                }]
            },
            // 打包less
            // {
            //     test:/\.(css\less)$/i,
            //     use:extractTextWebpackPlugin.extract({
            //         fallback:'style-loader',//Creates `style' nodes from Js strings 把css代码转换为node风格的us字符串
            //         use:[
            //             'css-loader',//Translates css into commonjs纪css变成Commonjs模块
            //             {
            //                 loader:'postcss-loader',//处理css代码
            //                 options:{
            //                     plugins:function(){
            //                         require("cssgrace")//代码美化
            //                         require("autoprefixer")
            //                         require("postcss-px2rem")({
            //                             //手机端需要
            //                         })
            //                     }
            //                 }
            //             },
            //             'less-loader'
            //         ]
            //     })
            // }

            {
                test:/\.(css)$/i,
                use:[miniCssExtractPlugin.loader,'css-loader']
            },
            {
                test:/\.(less)$/i,
                use:[miniCssExtractPlugin.loader,'css-loader',"less-loader"]
            },
            {
                test:/\.(sass|scss)$/i,
                use:[miniCssExtractPlugin.loader,'css-loader',"sass-loader"]
            },
            // 打包scss
        ]
    },
    // 启动的服务
    devServer:{
        host:'0.0.0.0',
        port:4000,
        hot:true,//热替换
        // open:true,//自动打开浏览器
        compress:true
    },
    //webpack插件  所有插件都需要实例化
    plugins:[
        new htmlWebpackPlugin({
           template:'./public/index.html',
           inject:true,//自动引入打包的文件
           minify:true //是否压缩
        }),
        new openBroserWebpackPlugin({
            url:'http://localhost:4000'
        }),
        // 抽离样式
        // new extractTextWebpackPlugin({
        //     filename:"css/app.[hash:8].css",
        //     allChunks:true,//抽离所有的样式
        //     disable:false,//是否禁用

        // })
        new miniCssExtractPlugin({
            filename:"css/app.[hash:8].css",
            chunkFilename:"css/[id].[hash:8].css"
        })
    ]

}